<template>
	<div>
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-search"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">筛选查询</font>
			<div style="float: right; width: auto;">
				<font color="#72767B" style="margin-left: 20px;">模糊条件</font>
				<div style="float: right; margin-right: 30px;">
					<el-button type="primary" @click="vagueQuery()">查询</el-button>
				</div>
				<div style="float: right; width: auto;margin-right: 20px; margin-left: 20px;">
					<el-input v-model="categoryPage.queryCriteria.primaryCategoryName" placeholder="请输入商品大类名称进行查询"></el-input>
				</div>
			</div>
			<!-- <div style="float: right; width: auto; margin-right: 20px;">
				<font color="#72767B" style="margin-right: 20px;">大类</font>
				<el-select clearable size='mini' v-model="state" placeholder="状态查询" autocomplete="off">
				  <el-option v-for="(item,index) in stateList" :label="item" :value ="index"></el-option>
				</el-select>
			</div> -->
		</div>
		 
		 
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px; margin-top: 20px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-s-grid"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">数据列表</font>
			
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" :disabled="indexList.length ==0" @click="delCategory()">删除</el-button>
			</div>
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" :disabled="indexList.length ==0" @click="modifyCategory()">修改</el-button>
			</div>
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" @click="dialogFormVisible1 = true">新增</el-button>
			</div>
			
			<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);margin-top: 4px;">
				<el-table height="600px" :data="allCategory" border style="width: 100%" @select="getCategory">
					<el-table-column align="center" type="selection" width="55"></el-table-column>
					<el-table-column align="center" prop="primaryCategoryNumber" label="编号" width="180"></el-table-column>
					<el-table-column align="center" prop="primaryCategoryName" label="大类名称" width="180"></el-table-column>
					<el-table-column align="center" prop="primaryCategoryOrder" label="排序" width="180"></el-table-column>
					<el-table-column align="center" prop="primaryCategoryRemarks" label="备注" ></el-table-column>
				</el-table>
			</div>
			<div style="text-align: center;">
				<el-pagination :page-count="pageCount" @current-change="changPage" 
				:current-page="categoryPage.indexPage"  background layout="prev, pager, next"></el-pagination>
			</div>
		</div>
		
		<el-dialog title="提示" :visible.sync="delVisible" width="30%">
		  <span>所选类有下级类别，删除将同时删除下级列表，是否确认删除</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="delVisible = false">取 消</el-button>
		    <el-button type="primary" @click="deleteConfirm">确 定</el-button>
		  </span>
		</el-dialog>

		
		<!-- 修改弹出框 -->
		<el-dialog title="大类修改" :visible.sync="dialogFormVisible">
			<el-form :model="oneModel" :rules="oneModelRules" ref="oneModel" label-width="120px" class="demo-ruleForm">
				<el-form-item label="编号" prop="primaryCategoryNumber">
					<el-input readonly type="text" autosize v-model="oneModel.primaryCategoryNumber"></el-input>
				</el-form-item>
				
				<el-form-item label="大类名称" prop="primaryCategoryName">
					<el-input type="text" autosize v-model="oneModel.primaryCategoryName"></el-input>
				</el-form-item>
				
				<el-form-item label="图标上传" prop="primaryCategoryIcon">
				<el-upload class="upload-demo" action="http://localhost/primary-category/upload"
					:on-success="uploadSuccess" :file-list="fileList" list-type="picture">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
				</el-upload>
				
				</el-form-item>
				<el-form-item label="排序" prop="primaryCategoryOrder">
					<el-input type="number" autosize v-model="oneModel.primaryCategoryOrder"></el-input>
				</el-form-item>
		     
				<el-form-item label="备注" prop="primaryCategoryRemarks">
					<el-input type="textarea" v-model="oneModel.primaryCategoryRemarks"></el-input>
				</el-form-item>
				
				<el-form-item label="鉴定图定义" prop="primaryCategoryRemarks">
					<div v-for="(image, index) in imageParamList">
						<div style="float: left;">
							<el-input v-model="image.appraisalImageName" placeholder="正面"></el-input>
						</div>
						<el-select clearable v-model="image.appraisalImageState" autocomplete="off">
							<el-option label="必选" value ="1"></el-option>
							<el-option label="可选" value ="0"></el-option>
						</el-select>
						<font size="3" class="del_font" @click="delImage(index)">删除</font>
					</div>
					<font size="3" class="del_font" @click="addImage()">新增</font>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="confirm('oneModel')">确认</el-button>
					<el-button type="primary" @click="cancel()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<!-- 新增弹出框 -->
		<el-dialog title="大类新增" :visible.sync="dialogFormVisible1">
			<el-form :model="addModel" :rules="oneModelRules" ref="addModel" label-width="120px" class="demo-ruleForm">
				
				<el-form-item label="大类名称" prop="primaryCategoryName">
					<el-input type="text" autosize v-model="addModel.primaryCategoryName"></el-input>
				</el-form-item>
				
				<el-form-item label="图标上传" prop="primaryCategoryIcon">
				<el-upload class="upload-demo" action="http://localhost/primary-category/upload"
					:on-success="uploadSuccess" :file-list="fileList" list-type="picture">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
				</el-upload>
				
				</el-form-item>
				<el-form-item label="排序" prop="primaryCategoryOrder">
					<el-input type="number" autosize v-model="addModel.primaryCategoryOrder"></el-input>
				</el-form-item>
		     
				<el-form-item label="备注" prop="primaryCategoryRemarks">
					<el-input type="textarea" v-model="addModel.primaryCategoryRemarks"></el-input>
				</el-form-item>
				
				<el-form-item label="鉴定图定义" prop="primaryCategoryRemarks">
					<div v-for="(image, index) in imageParamList">
						<div style="float: left;">
							<el-input v-model="image.appraisalImageName" placeholder="正面"></el-input>
						</div>
						<el-select clearable v-model="image.appraisalImageState" autocomplete="off">
							<el-option label="必选" value ="1"></el-option>
							<el-option label="可选" value ="0"></el-option>
						</el-select>
						<font size="3" class="del_font" @click="delImage(index)">删除</font>
					</div>
					<font size="3" class="del_font" @click="addImage()">新增</font>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="confirmAdd('addModel')">确认</el-button>
					<el-button type="primary" @click="cancel()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'Category',
		data() {
			return {
				delVisible: false,
				oneAppraisaImage: {
					appraisalImageName: null,
					appraisalImageState: null
				},
				addModel: {
					previousNumber: null,
					primaryCategoryNumber: null,
					primaryCategoryIcon: null,
					primaryCategoryName: null,
					primaryCategoryOrder: 0,
					primaryCategoryRemarks: null,
					iconName: null,
					//鉴定图定义集合
					imageParamList: []
				},
				imageParamList: [
					
				],
				state: null,
				fileList: [],
				
				dialogFormVisible: false,
				dialogFormVisible1: false,
				oneModelRules: {
					primaryCategoryName: [
						{required: true, message: '大类名称不能为空', trigger: 'blur' }
					],
					primaryCategoryOrder: [
						{required: true, message: '排序不能为空', trigger: 'blur' }
						// {type: 'number', min: 0, message: '排序必需大于 0', trigger: 'change'}
					]
					// primaryCategoryRemarks: [
					// 	{required: true, message: '备注不能为空', trigger: 'blur' },
					// 	{ min: 3, message: '长度大于 3 个字符', trigger: 'blur' }
					// ]
				},
				//修改数据
				oneModel: {
					primaryCategoryId: null,
					primaryCategoryNumber: null,
					primaryCategoryIcon: null,
					primaryCategoryName: null,
					primaryCategoryOrder: null,
					primaryCategoryRemarks: null,
					iconName: null,
					//鉴定图定义集合
					imageParamList: []
				},
				//多选框
				indexList: [],
				allCategory:[],
				categoryPage: {
					indexPage: 1,
					pageSize: 3,
					queryCriteria: {
						primaryCategoryName: null
					}
				},
				pageCount: 1,
			}	
		},
		methods: {
			
			//删除鉴定图定义
			delImage(index) {
				this.imageParamList.splice(index, 1);
			},
			//添加鉴定图定义
			addImage(index) {
				this.imageParamList.push({
					appraisalImageName: null,
					appraisalImageState: null
				});
			},
			
			uploadSuccess(response, file, fileList) {
				this.oneModel.iconName = file.name;
				this.oneModel.primaryCategoryIcon = response.data;
				this.addModel.iconName = file.name;
				this.addModel.primaryCategoryIcon = response.data;
			},
			
			changPage(page) {
				this.categoryPage.indexPage = page;
				this.loadIndexPage();
			},
			getCategory(categoryList, row) {
				this.indexList = [];
				this.oneModel = {};
				for(let c of categoryList) {
					this.indexList.push(c.primaryCategoryId);
				}
				if(categoryList.length == 1) {
					this.oneModel = categoryList[0];
				}
			},
			//新增
			confirmAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						for(let i of this.imageParamList) {
							if(i.appraisalImageName == null || i.appraisalImageState == null) {
								this.imageParamList.remove(i);
							}
						}
						if(this.allCategory.length > 0) {
							this.addModel.previousNumber = this.allCategory[0].primaryCategoryId;
						}
						this.addModel.imageParamList = this.imageParamList;
						this.$http.post("/primary-category/add", this.addModel).then(data => {
							if(data.data.code == 200) {
								this.dialogFormVisible1 = false;
								this.loadIndexPage();
								this.$message.success(data.data.message);
							}else {
								this.$message.error(data.data.message);
							}
						});
					} else {
						this.$message.error("添加失败");
						return false;
					}
				});
			},
			//修改
			modifyCategory() {
				if(this.oneModel == null | this.oneModel == '' | this.oneModel.primaryCategoryId == null | this.oneModel.primaryCategoryId == '') {
					this.$message.warning("请选择一项进行修改");
				}else {
					this.$http.get("/primary-category/find-appraisal/"+ this.oneModel.primaryCategoryId).then(data => {
						if(data.data.code == 200) {
							let a = data.data.data.imageDtoList;
							for(let i of a) {
								i.appraisalImageState = i.appraisalImageState+'';
							}
							this.imageParamList = a;
						}else {
							this.imageParamList = [];
						}
					})
					this.dialogFormVisible = true;
				}
			},
			//确认修改
			confirm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						for(let i of this.imageParamList) {
							if(i.appraisalImageName == null || i.appraisalImageState == null) {
								this.imageParamList.remove(i);
							}
						}
						this.oneModel.imageParamList = this.imageParamList;
						this.$http.post("/primary-category/modify", this.oneModel).then(data => {
							if(data.data.code == 200) {
								this.dialogFormVisible = false;
								this.$message.success(data.data.message);
							}else {
								this.$message.error(data.data.message);
							}
						});
					} else {
						this.$message.error("更改失败");
						return false;
					}
				});
			},
			//取消修改
			cancel() {
				this.dialogFormVisible = false;
				this.dialogFormVisible1 = false;
				this.$message.info("已取消操作");
			},
			//删除
			delCategory() {
				this.$http.post("/goods-subclass/findIndex", this.indexList).then(data => {
					if(data.data.code == 200) {
						this.delVisible = true;
					}else {
						this.deleteConfirm();
					}
				})
			},
			//删除确认
			deleteConfirm() {
				this.delVisible = false;
				this.$http.post("primary-category/delete", this.indexList).then(data => {
					if(data.data.code == 200) {
						this.$message.success(data.data.message);
						this.loadIndexPage();
					}
				})
			},
			
			//模糊查询
			vagueQuery() {
				this.loadIndexPage();
			},
			
			loadIndexPage() {
				this.$http.post("primary-category/find", this.categoryPage).then(data => {
					if(data.data.code == 200) {
						this.allCategory = data.data.data.dtoList;
						this.pageCount = data.data.data.pageCount;
						this.categoryPage.indexPage = data.data.data.indexPage;
					}
				})
			}
		},
		created() {
			this.loadIndexPage();
		}
		
	}
</script>

<style>
	.del_font {
		cursor: pointer; 
		margin: 10px;
	}
	.del_font:hover {
		color: blue;
	}
	
</style>
